<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money base-flex">
						<div class="money-li" v-for="(item, index) in orderMoney" :key="index">
							<div class="title">{{ item.title }}</div>
							<div class="num">{{ item.num }}</div>
							<div class="money-li-child base-flex">
								<div v-for="(itemC, indexC) in item.child" :key="indexC">
									<div class="title">{{ itemC.title }}</div>
									<div class="num">{{ itemC.num }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>

			<template #slot-datepicker>
				<div>
					<span class="date-filter">
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'today' }"
							@click="switchDate('today')"
							>今日</el-button
						>
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'yesterday' }"
							@click="switchDate('yesterday')"
							>昨日</el-button
						>
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'week' }"
							@click="switchDate('week')"
							>近7天</el-button
						>
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'month' }"
							@click="switchDate('month')"
							>近30天</el-button
						>
					</span>

					<date-picker
						style="margin-left:10px"
						:date="dateval"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>

					<el-button
						@click="flowExport"
						type="primary"
						style="margin-left:10px"
						size="mini"
					>
						<i class="el-icon-download"></i>导出报表
					</el-button>

					<el-button
						@click="updateBaiduData"
						type="primary"
						style="margin-left:10px"
						size="mini"
						:loading="updateBaiduIng"
					>
						<i class="el-icon-refresh"></i>更新百度统计数据
					</el-button>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';
import { download } from '@/utils/index';
export default {
	data() {
		return {
			crud: null,
			dateval: [
				moment().format('YYYY-MM-19 00:00:00'),
				moment().format('YYYY-MM-DD 23:59:59')
			],
			updateBaiduIng: false,
			isShow: 'today',
			orderMoney: [
				{
					title: '浏览量(PV)',
					num: ''
				},
				{
					title: '访客数(UV)',
					num: ''
				},
				{
					title: '跳出率',
					num: ''
				},
				{
					title: '有效订单',
					num: ''
				},
				{
					title: '失效订单',
					num: ''
				},
				{
					title: '销售额',
					num: ''
				},
				{
					title: '有效佣金',
					num: ''
				},
				{
					title: '淘礼金金额',
					num: ''
				}
			]
		};
	},
	components: {
		DatePicker
	},
	methods: {
		updateBaiduData() {
			this.updateBaiduIng = true;
			this.$service.baiduFlow.baiduFlow
				.refreshSiteStatistics()
				.then(res => {
					this.$message.success('更新成功');
					this.refresh();
					this.updateBaiduIng = false;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		switchDate(date) {
			console.log(this.dateval);
			let startTime, endTime;
			this.isShow = date;
			switch (date) {
				case 'today':
					startTime = moment().format('YYYY-MM-DD');
					endTime = moment().format('YYYY-MM-DD');
					break;
				case 'yesterday':
					startTime = moment()
						.add(-1, 'days')
						.format('YYYY-MM-DD');
					endTime = moment()
						.add(-1, 'days')
						.format('YYYY-MM-DD');
					break;
				case 'week':
					startTime = moment()
						.add(-7, 'days')
						.format('YYYY-MM-DD');
					endTime = moment().format('YYYY-MM-DD');
					break;
				case 'month':
					startTime = moment()
						.add(-30, 'days')
						.format('YYYY-MM-DD');
					endTime = moment().format('YYYY-MM-DD');
					break;
			}
			this.dateval = [startTime, endTime];
			this.refresh({ startTime: startTime, endTime: endTime });
		},
		toStamp(stamps) {
			return moment(stamps).format('YYYY-MM-DD HH:mm:ss');
		},
		flowExport() {
			this.$service.baiduFlow.baiduFlow
				.tradeStatisticsExport(this.params)
				.then(res => {
					download({
						data: res,
						fileName: `流量总览-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.baiduFlow.baiduFlow)
				.set('dict', {
					api: {
						page: 'tradeStatistics'
					}
				})
				.set('table', {
					columns: [
						{
							label: '日期',
							prop: 'day',
							sortable: 'custom',
							align: 'center',
							width: 90
						},
						{
							label: '浏览量(PV)',
							prop: 'pvCount',
							align: 'center'
						},
						{
							label: '访客数(UV)',
							prop: 'visitorCount',
							align: 'center'
						},
						{
							label: '销售额',
							prop: 'orderAmount',
							align: 'center'
						},
						{
							label: '有效订单',
							prop: 'validOrderNum',
							align: 'center'
						},
						{
							label: '失效订单',
							prop: 'invalidOrderNum',
							align: 'center'
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center'
						},
						{
							label: '淘礼金消耗',
							prop: 'tljMoney',
							align: 'center'
						},
						{
							label: '净利润',
							prop: 'profit',
							align: 'center'
						},
						{
							label: '转化率',
							prop: 'change',
							align: 'center',
							formatter: row => {
								return (Number(row.change) * 100).toFixed(2) + '%';
							}
						},
						{
							label: '平均客单',
							prop: 'avgPerAmount',
							align: 'center',
							formatter: row => {
								return Number(row.avgPerAmount || 0).toFixed(4);
							}
						},
						{
							label: '佣金单产',
							prop: 'perProduct',
							align: 'center',
							formatter: row => {
								return Number(row.perProduct || 0).toFixed(4);
							}
						},
						{
							label: '利润单产',
							prop: 'product',
							align: 'center',
							formatter: row => {
								return Number(row.product || 0).toFixed(4);
							}
						}
					],

					op: {
						visible: false
					}
				})

				.set('layout', [
					['slot-top-stats'],
					['refresh-btn', 'slot-datepicker', 'flex1'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;

					const subData = await next(params);
					this.orderMoney[0].num = subData.pvCount || '0';
					this.orderMoney[1].num = subData.visitorCount || '0';
					this.orderMoney[2].num = subData.exitRatio || '0' + '%';
					this.orderMoney[3].num = subData.validOrderNum || '0';
					this.orderMoney[4].num = subData.invalidOrderNum || '0';
					this.orderMoney[5].num = '￥' + (subData.orderAmount || '0');
					this.orderMoney[6].num = '￥' + (subData.validCommission || '0');
					this.orderMoney[7].num = '￥' + (subData.tljMoney || '0');
				})
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				order: 'desc',
				selfType: '1'
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>
<style lang="scss" scoped>
.date-filter {
	margin-left: 10px;
	.btn {
		margin: 0;
		background: #fff;
		color: #888;
	}
}
.dateChecked {
	background: #4db7f3 !important;
	color: #fff !important;
}
.number {
	width: 100%;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-between;
		.money-li {
			position: relative;
			.money-li-child {
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 5px;
				}
				margin-top: 18px;
			}
			.money-li-child div:first-child {
				margin-right: 30px;
			}
			.title {
				color: $text-grey;
				font-size: $font12;
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
</style>
